<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module">
			// three.js三要素
			//1.下载并引入three库 => import/npm 引入库
			// 2.创建场景对象
			// 3.创建摄像机对象
			// 参数1: 垂直角度 (建议 75)，视野范围
			// 参数2: 宽高比 (建议与画布相同宽高)，物体绘制比例
			// 参数3: 近截面距离摄像机距离
			// 参数4: 远截面距离摄像机距离
			// 4，创建渲染器，并设置画布大小，添加到 DOM 显示

			// 1.下载并引入three库 
			//npm i three
			import * as THREE from 'https://unpkg.com/three/build/three.module.js';//命名导出

			// 场景、摄像机、渲染器 => 定义全局变量 => 代码变多，封装多个函数，多个函数使用方便
			let scene, camera, renderer
			function init() {
				// 2.创建场景对象
				scene = new THREE.Scene()
				// 3.创建摄像机对象
				// 参数1: 垂直角度 (建议 75)，视野范围
				// 参数2: 宽高比 (建议与画布相同宽高)，物体绘制比例
				// 参数3: 近截面距离摄像机距离
				// 参数4: 远截面距离摄像机距离
				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
			// 4，创建渲染器，并设置画布大小，添加到 DOM 显示
				renderer = new THREE.WebGLRenderer()
				//设置画布大小
				renderer.setSize(window.innerWidth, window.innerHeight)//全屏
				document.body.append(renderer.domElement)//把画布canvas标签添加到页面上

				// 传入场景和摄像机，渲染画面
				renderer.render(scene, camera)//调用渲染器对象的render方法，传入场景、摄像机
				
			}

			//初始化三要素
			init()

			// const scene = new THREE.Scene();
			// //PerspectiveCamera透视相机：模拟近大远小
			// const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			// const renderer = new THREE.WebGLRenderer();
			// renderer.setSize( window.innerWidth, window.innerHeight );
			// document.body.appendChild( renderer.domElement );

			// const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			// const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			// const cube = new THREE.Mesh( geometry, material );
			// scene.add( cube );

			// camera.position.z = 5;

			// function animate() {
			// 	requestAnimationFrame( animate );

			// 	cube.rotation.x += 0.01;
			// 	cube.rotation.y += 0.01;

			// 	renderer.render( scene, camera );
			// }

			// animate();
		</script>
	</body>
</html>